<!--
 * @Description: 检测数据统计
 * @Author: Huang Junjie
 * @Date: 2021-10-19 17:05:42
 * @LastEditTime: 2021-10-20 20:37:37
 * @LastEditors: Huang Junjie
-->
<template>
  <div class="content-card">
    <!-- 标题 -->
    <div class="title">
      检测数据统计
      <i class="el-icon-more" />
    </div>
    <!-- 标题 -->

    <!-- 统计图片 -->
    <div class="statistics-img">
      <img
        class="img"
        :src="require('@/assets/images/jjxt/data-center-home/statistics01.png')"
      >
      <div class="num">45TB</div>
    </div>
    <!-- 统计图片 -->

    <!-- 表格 -->
    <div class="table-div">
      <table class="table">
        <tbody>
          <tr>
            <td class="td-th">数据类型</td>
            <td class="td-th">数量</td>
            <td class="td-th" />
            <td class="td-th">容量占比</td>
          </tr>
        </tbody>
      </table>
      <el-scrollbar>
        <table class="table">
          <tbody>
            <tr>
              <td class="td">1C数据</td>
              <td class="td">35000</td>
              <td class="td">
                <el-progress :text-inside="true" :stroke-width="22" :percentage="statistics.test01" />
              </td>
              <td class="td green-num">30%</td>
            </tr>
            <tr>
              <td class="td">2C数据</td>
              <td class="td">25000</td>
              <td class="td">
                <el-progress :text-inside="true" :stroke-width="22" :percentage="statistics.test02" />
              </td>
              <td class="td green-num">30%</td>
            </tr>
            <tr>
              <td class="td">4C数据</td>
              <td class="td">20000</td>
              <td class="td">
                <el-progress :text-inside="true" :stroke-width="22" :percentage="statistics.test03" />
              </td>
              <td class="td red-num">20%</td>
            </tr>
            <tr>
              <td class="td">5C数据</td>
              <td class="td">15000</td>
              <td class="td">
                <el-progress :text-inside="true" :stroke-width="22" :percentage="statistics.test04" />
              </td>
              <td class="td red-num">20%</td>
            </tr>
          </tbody>
        </table>
      </el-scrollbar>
    </div>
    <!-- 表格 -->
  </div>
</template>

<script>
export default {
  name: 'TestDataStatistics',
  data() {
    return {
      statistics: {
        test01: 0,
        test02: 0,
        test03: 0,
        test04: 0
      }
    };
  },
  mounted() {
    this.statistics = {
      test01: 30,
      test02: 30,
      test03: 20,
      test04: 20
    };
  }
};
</script>

<style lang="scss" scoped>
.el-scrollbar {
  position: absolute;
  top: 185px;
  left: 10px;
  right: 10px;
  bottom: 0;
  ::v-deep .el-scrollbar__wrap {
    overflow-x: hidden;
  }
}
.content-card {
  position: relative;
  width: 355px;
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid #ebebeb;
  .title {
    color: #666666;
    padding: 5px 0 5px 10px;
    font-weight: 600;
    border-bottom: 1px solid #ebebeb;
    .el-icon-more {
      color: #676767;
      float: right;
      margin-right: 10px;
      cursor: pointer;
    }
    .el-icon-more:hover {
      color: #54B2FC;
      float: right;
      margin-right: 10px;
      cursor: pointer;
    }
  }
  .statistics-img {
    position: relative;
    margin: 10px 10px 0 10px;
    height: 110px;
    text-align: center;
    border-radius: 5px;
    border: 1px solid #ebebeb;
    .img {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
    }
    .num {
      float: right;
      color: #666666;
      font-size: 25px;
      font-weight: 600;
      margin: 10px 20px 0 0;
    }
  }
  .table-div {
    margin: 0 10px;
    .table {
      border-collapse: collapse;
      box-sizing: border-box;
      width: 100%;
      .td-th {
        font-size: 14px;
        color: #676767;
        width: 25%;
        line-height: 30px;
        text-align: center;
        border-bottom: 1px solid #ebebeb;
      }
      .td {
        font-size: 14px;
        color: #666666;
        width: 25%;
        line-height: 30px;
        padding: 0 5px;
        text-align: center;
        border-bottom: 1px solid #ebebeb;
      }
      .green-num {
        color: #23d123;
      }
      .red-num {
        color: #ff2727;
      }
    }
  }
}
</style>
